// 1 导入react
import React from 'react'
import ReactDOM from 'react-dom'

// 引入css文件
import "./index.css"




// 纯组件
// 说明: 纯组件内部的对比是shallow compare (浅层对比)
// 对于值类型来说: 对比两个值是否相同(直接赋值即可 没有坑)
// 注意:state或props 中属性的值为引用类型时
// 应该创建新数据 不要直接修改原数据

const obj = { number: 0 }
const newObj = obj
newObj.number = 23
console.log(newObj.number === obj.number)

// 使用纯组件
class App extends React.PureComponent {


    state = {
        count: 0,
        obj: { number: 0 }
    }

    // 错误演示

    // handlerClick = (e) => {
    //     const newObj = this.state.obj
    //     newObj.number = Math.floor(Math.random() * 3)
    //     this.setState(() => {
    //         return {
    //             obj: newObj
    //         }
    //     })
    // }

    handlerClick = (e) => {
        // 对象的创建
        const newObj = { ...this.state.obj, number: Math.floor(Math.random() * 3) }
        // 数组的创建
        // const list = [...this.state.list, {Math.floor(Math.random() * 3) }]
        this.setState(() => {
            return {
                obj: newObj
            }
        })
    }





    render() {
        console.log("reder")
        return (
            <div>
                <h1>随机数: {this.state.obj.number}</h1>
                <button onClick={this.handlerClick}>重新生成</button>
            </div>
        )
    }
}


class NumberBox extends React.Component {



    state = {
        obj: { number: 0 }
    }
    shouldComponentUpdate(nextProps, nextState) {
        console.log('最新的state', nextProps)
        console.log('this.props', this.state)
        // return false 阻止页面渲染
        console.log(this.state.obj.number)
        console.log(nextProps.obj.number)
        return nextProps.obj !== this.state.obj
    }
    render() {
        console.log("reder")
        return <h1>随机数: {this.props.obj.number}</h1>
    }

    componentDidMont() {
        this.setState((preState, props) => {
            return {
                obj: props.obj
            }
        })
    }
}

//3 渲染react元素
ReactDOM.render(
    <App />,
    document.getElementById('root'))
